<template>
<div >
	<!--轮播图-->
	<div class="scrollImage">
		<div class="item">
			<!--图片-->
		<img :src="scrollImageData[currentScrollImageIndex]"/>
		</div>
		<!--轮播图切换按钮-->
		<div class="scrollImage-button">
			<img src="~@/assets/image/scroll/prev.png" @click="transferScrollImage(prevIndex)" style="float: left;"/>
			<img src="~@/assets/image/scroll/next.png" @click="transferScrollImage(nextIndex)" style="float: right;"/>
		</div>
	</div>
	<div style="display: block;height: 30px;background: darkblue;"></div>
	<div class="content">
		<div class="content-title">
			线 上 自 习 室  - 助 您 的 学 业 更 上 一 成 
		</div>
		<div class="content-box">
			<div class="content-box-left">
				<img src="~@/assets/image/studyroom.jpeg" />
			</div>
			<div class="content-box-right">
				<div class="content-box-right-buttonBox">
				<el-button @click="toLogin()" style="background: white;color:#1368F7">立 即 登 录</el-button><br />
				<el-button @click="toRegister()" style="background: #1368F7;color:white">立 即 注 册</el-button>
				</div>
			</div>
		</div>
	</div>
<!--	-->
</div>
</template>

<script>
	export default {
		name:'Primary',
		data(){
			return{
				
				scrollImageData:[
				require("@/assets/image/scroll/scroll-01.jpeg"),
				require("@/assets/image/scroll/scroll-02.jpeg"),
				require("@/assets/image/scroll/scroll-03.jpeg")
				],
				currentScrollImageIndex:0,
				scrollTimer:null,
			}
		},
		methods:{
			transferScrollImage(index){
				this.currentScrollImageIndex=index
				console.log(index)
			},
			toLogin(){
				this.$router.push({
					name:'login'
				})
			},
			toRegister(){
				this.$router.push({
					name:'register'
				})
			},
			autoLogin(){
				//是否有token,有则跳转Home页面
				if(localStorage.getItem("token")){
					this.$axios({
					method:'POST',
					url:'user/me',
					headers:{
						authorization:localStorage.getItem("token")
					}
				}).then(
					response=>{		
						if(response.data.success){
								this.$message.info('自动登录')
							this.$router.replace({
								path:'home/'
							})
						}else{
							this.$message.error(response.data.message)
						}
					},
					error=>{
						console.log(error.message)
					}
				)
				}
			},
			init(){
				this.autoLogin()
			}


		},
		computed:{
			prevIndex(){
				if(this.currentScrollImageIndex==0){
					return this.scrollImageData.length-1;
				}else{
					return this.currentScrollImageIndex-1;
				}
			},
			nextIndex(){
				if(this.currentScrollImageIndex>=this.scrollImageData.length-1){
					return 0;
				}else{
					return this.currentScrollImageIndex+1;
				}
			},
		},
		mounted(){
			this.init()
			this.scrollTimer=setInterval(()=>{
				this.transferScrollImage(this.nextIndex)
			},2500)
		},
		beforeDestroy(){
			clearInterval(this.scrollTimer)
		}
	}
</script>

<style scoped>
	*{
		margin: 0;
		padding: 0;
	}
	.scrollImage{
		width: 100%;
		height: 500px;
        margin: 0 auto;
        position: relative;
        top:0;
	}
	.scrollImage img{
		width: 100%;
		height: 500px;
		display: block;
	}
	.scrollImage .page{
	 background: rgba(0,0,0,.5);
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
	}
	.scrollImage-button{
		width: 100%;
		height: 80px;
		position: absolute;
		top:35%;
	}
	.scrollImage-button img{
		height: 100%;
		width: 80px;
		background: gray;
		opacity: 0.4;
		cursor: pointer;
	}
	.current{
		color:#ff6700
	}

	.content{
		width: 100%;
		display: block;
	}
	.content-title{
		height: 200px;
		width: 100%;
		line-height: 200px;
		text-align: center;
		font-size: 40px;
		color:#1368F7;
		font-weight: bold;
	}
	.content-box{
		margin-top:50px;
		width: 100%;
		height: 400px;
	}
	.content-box-left{
		height: 100%;
		width: 50%;
		display: inline-block;
		float: left;
	}
	.content-box-left img{
		width: 500px;
		height: 300px;
		position: absolute;
		left: 20%;
	}
	.content-box-right{
		height: 100%;
		width: 49%;
		float: right;
		display: inline-block;
		position: relative;
		
	}
	.content-box-right-buttonBox{
		width: 250px;
		position: relative;
		left: 100px;
	}
	.content-box-right-buttonBox button{
		width: 250px;
		height: 80px;
		font-size: 20px;
		font-weight: 600;
		border-radius: 10px;
		margin:25px 0;
	}
</style>